<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/base.min.css">
    <link rel="stylesheet" href="../css/personal_center.min.css">
    <!-- bootstrap样式 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 侧边悬浮导航栏 -->
    <div class="bar">
        <a href="shoppingcart.html" class="item">
            <span class="badge badge-light">0</span>
        </a>
        <a href="backsystem_home.html" class="item"></a>
        <a href="personalcenter.html" class="item"></a>
    </div>
    <!-- 头部header样式 -->
    <header class="container">
        <!-- 头部nav -->
        <div class="row">
            <div class="col-8 offset-2">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                        <a class="navbar-brand logo" href="#"><img src="../images/index_logo.png" alt=""></a>
                        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <a href="login.html" class="login">登录</a>
                            <div class="border"></div>
                            <a href="register.html" class="register">注册</a>
                            <div class="input">
                                <input type="text" placeholder="热门搜索：千花花瓶">
                                <i class="search"></i>
                            </div>
                            <a href="#" class="nav-user"></a>
                            <a href="#" class="nav-code"></a>
                        </form>
                    </div>
                </nav>
            </div>

        </div>
        <!-- 导航栏 -->
        <div class="row">
            <div class="col-10 offset-1">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">所有商品</a>
                        <div class="sub-nav">
                            <ul>
                                <li>
                                    <img src="../images/sub_nav1.jpg" alt="">
                                    <span>浓情欧式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav2.jpg" alt="">
                                    <span>浪漫美式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav3.jpg" alt="">
                                    <span>雅致中式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav4.jpg" alt="">
                                    <span>简约现代</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav5.jpg" alt="">
                                    <span>创意装饰</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="decorate.html">装饰摆件</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">布艺软饰</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="wall-decoration.html">墙式壁挂</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">蜡艺香薰</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">创意家居</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 中间主题内容部分 -->
    <main>
        <!-- 面包屑导航栏 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item home"><a href="#">首页</a></li>
                <li class="breadcrumb-item"><a href="#">个人中心</a></li>
                <li class="breadcrumb-item activity" aria-="page">我的订单</li>
            </ol>
        </nav>
        <!-- 主体内容 -->
        <div class="wrapper">
            <!-- 主题内容侧边栏 -->
            <div class="aside">
                <div class="icon-title">
                    <div class="icon"></div>
                    <p>[ss***k] [退出登录]</p>
                </div>
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link weight" href="#">我的交易</a>
                    <a class="nav-link" href="shoppingcart.html">我的购物车</a>
                    <a class="nav-link" id="v-pills-myorder-tab" data-toggle="pill" href="#v-pills-myorder" role="tab"
                        aria-controls="v-pills-myorder" aria-selected="false">我的订单</a>
                    <a class="nav-link" id="v-pills-commentsheet-tab" data-toggle="pill" href="#v-pills-commentsheet"
                        role="tab" aria-controls="v-pills-commentsheet" aria-selected="false">评价晒单</a>
                    <a class="nav-link weight" href="#">个人中心</a>
                    <a class="nav-link" id="v-pills-mycenter-tab" data-toggle="pill" href="#v-pills-mycenter" role="tab"
                        aria-controls="v-pills-mycenter" aria-selected="false">我的中心</a>
                    <a class="nav-link" id="v-pills-addressmanagement-tab" data-toggle="pill"
                        href="#v-pills-addressmanagement" role="tab" aria-controls="v-pills-addressmanagement"
                        aria-selected="false">地址管理</a>
                    <a class="nav-link weight" href="#"">账户管理</a>
                    <a class=" nav-link" id="v-pills-personalinfo-tab" data-toggle="pill" href="#v-pills-personalinfo"
                        role="tab" aria-controls="v-pills-personalinfo" aria-selected="false">个人信息</a>
                    <a class="nav-link" id="v-pills-revisepwd-tab" data-toggle="pill" href="#v-pills-revisepwd"
                        role="tab" aria-controls="v-pills-revisepwd" aria-selected="false">修改密码</a>
                </div>
            </div>
            <!-- 主题内容详情 -->
            <div class="article">
                <div class="tab-content" id="v-pills-tabContent">
                    <!-- 我的订单 -->
                    <div class="tab-pane fade" id="v-pills-myorder" role="tabpanel"
                        aria-labelledby="v-pills-myorder-tab">
                        <p>我的订单<a href="http://www.baidu.com" class="more">请谨防钓鱼诈骗电话，了解更多>></a></p>
                        <nav class="nav-myorder">
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <a class="nav-link active" id="nav-allorder-tab" data-toggle="tab" href="#nav-allorder"
                                    role="tab" aria-controls="nav-allorder" aria-selected="true">全部有效订单</a>
                                <div class="division"></div>
                                <a class="nav-link" id="nav-nopay-tab" data-toggle="tab" href="#nav-nopay" role="tab"
                                    aria-controls="nav-nopay" aria-selected="false">待支付</a>
                                <div class="division"></div>
                                <a class="nav-link" id="nav-noreceiving-tab" data-toggle="tab" href="#nav-noreceiving"
                                    role="tab" aria-controls="nav-noreceiving" aria-selected="false">待收货</a>
                                <div class="division"></div>
                                <a class="nav-link" id="nav-closed-tab" data-toggle="tab" href="#nav-closed" role="tab"
                                    aria-controls="nav-closed" aria-selected="false">已关闭</a>
                            </div>
                            <div class="myorder-search">
                                <input type="text" placeholder="请输入商品名称、订单号">
                                <button>
                                    <img src="../images/index_search.png" alt="">
                                </button>
                            </div>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-allorder" role="tabpanel"
                                aria-labelledby="nav-allorder-tab">
                                <div class="goods">
                                    <p class="state-activation">已收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-activation">已收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-activation">已收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-activation">已收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-activation">已收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="page">
                                    <span>&lt;</span>
                                    <div class="number">1</div>
                                    <span>&gt;</span>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-nopay" role="tabpanel" aria-labelledby="nav-nopay-tab">
                                <div class="goods">
                                    <p class="state-noactive">待支付</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro2.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button class="btn-rw">待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-noactive">待支付</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro2.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button class="btn-rw">待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-noactive">待支付</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro2.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button class="btn-rw">待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="page">
                                    <span>&lt;</span>
                                    <div class="number">1</div>
                                    <span>&gt;</span>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-noreceiving" role="tabpanel"
                                aria-labelledby="nav-noreceiving-tab">
                                <div class="goods">
                                    <p class="state-noactive">待收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro2.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button class="btn-rw">待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-noactive">待收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro2.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button class="btn-rw">待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-noactive">待收货</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro2.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button class="btn-rw">待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="page">
                                    <span>&lt;</span>
                                    <div class="number">1</div>
                                    <span>&gt;</span>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-closed" role="tabpanel" aria-labelledby="nav-closed-tab">
                                <div class="goods">
                                    <p class="state-activation">已关闭</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-activation">已关闭</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="goods">
                                    <p class="state-activation">已关闭</p>
                                    <div class="goods-des">
                                        <p class="des-left">2016年12月1日 18:53 | 杨小黄 | 订单号：5160513358520018 | 在线支付</p>
                                        <p class="des-right">订单金额: <span>￥99.99</span>元</p>
                                    </div>
                                    <div class="goods-hr"></div>
                                    <div class="goods-info">
                                        <div class="goods-icon"><img src="../images/pc_pro1.jpg" alt=""></div>
                                        <div class="goods-name">
                                            <p class="name">家用创意菜盘子圆盘 釉下彩复古</p>
                                            <p class="price">￥99.99x1</p>
                                        </div>
                                        <div class="goods-btn">
                                            <button>待评价</button>
                                            <button>订单详情</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="page">
                                    <span>&lt;</span>
                                    <div class="number">1</div>
                                    <span>&gt;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 评论晒单 -->
                    <div class="tab-pane fade" id="v-pills-commentsheet" role="tabpanel"
                        aria-labelledby="v-pills-commentsheet-tab">
                        <p class="article-title">商品评价</p>
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <a class="nav-link active" id="nav-waitcommented-tab" data-toggle="tab"
                                    href="#nav-waitcommented" role="tab" aria-controls="nav-waitcommented"
                                    aria-selected="true">待评价商品</a>
                                <div class="division"></div>
                                <a class="nav-link" id="nav-commented-tab" data-toggle="tab" href="#nav-commented"
                                    role="tab" aria-controls="nav-commented" aria-selected="false">已评价商品</a>
                                <div class="division"></div>
                                <a class="nav-link" id="nav-uncomment-tab" data-toggle="tab" href="#nav-uncomment"
                                    role="tab" aria-controls="nav-uncomment" aria-selected="false">评价失效商品</a>
                            </div>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-waitcommented" role="tabpanel"
                                aria-labelledby="nav-waitcommented-tab">
                                <div class="card-deck">
                                    <div class="card">
                                        <img src="../images/pc_img1.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-waitcommented">去评价</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <img src="../images/pc_img2.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-waitcommented">去评价</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <img src="../images/pc_img3.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-waitcommented">去评价</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-commented" role="tabpanel"
                                aria-labelledby="nav-commented-tab">
                                <div class="card-deck">
                                    <div class="card">
                                        <img src="../images/pc_img4.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-commented">已评价</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <img src="../images/pc_img2.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-commented">已评价</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <img src="../images/pc_img3.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-commented">已评价</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-uncomment" role="tabpanel"
                                aria-labelledby="nav-uncomment-tab">
                                <div class="card-deck">
                                    <div class="card">
                                        <img src="../images/pc_img4.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p cla已失效ss="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-commented">已失效</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <img src="../images/pc_img2.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-commented">已失效</button>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <img src="../images/pc_img3.jpg" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h6 class="card-title">家用创意挂壁 釉下彩复古</h6>
                                            <p class="card-text">￥199.00</p>
                                            <p class="card-text">16000人评价</p>
                                            <button class="btn btn-commented">已失效</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 我的中心 -->
                    <div class="tab-pane fade show active" id="v-pills-mycenter" role="tabpanel"
                        aria-labelledby="v-pills-mycenter-tab">
                        <div class="title-content">
                            <div class="title-icon"></div>
                            <span>ss***k</span>
                            <span class="text-email">绑定邮箱：12****4@**.com</span>
                        </div>
                        <div class="des-content">
                            <div class="des-flex">
                                <div class="col-5">
                                    <div class="row">
                                        <div>
                                            <img src="../images/pc_icon_wallet.png" alt="...">
                                        </div>
                                        <div class="des-icon">
                                            <p class="wait">待支付的订单：0</p>
                                            <p class="see">查看待支付订单</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <div class="row">
                                        <div>
                                            <img src="../images/pc_icon_truck.png" alt="...">
                                        </div>
                                        <div class="des-icon">
                                            <p class="wait">待收货的订单：0</p>
                                            <p class="see">查看待收货订单</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="des-flex">
                                <div class="col-5">
                                    <div class="row">
                                        <div>
                                            <img src="../images/pc_icon_message.png" alt="...">
                                        </div>
                                        <div class="des-icon">
                                            <p class="wait">待评价的订单：0</p>
                                            <p class="see">查看待评价订单</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <div class="row">
                                        <div>
                                            <img src="../images/pc_icon_heart.png" alt="...">
                                        </div>
                                        <div class="des-icon">
                                            <p class="wait">喜欢的商品：0</p>
                                            <p class="see">查看喜欢的</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 地址管理 -->
                    <div class="tab-pane fade" id="v-pills-addressmanagement" role="tabpanel"
                        aria-labelledby="v-pills-addressmanagement-tab">
                        <p class="article-title">收获地址</p>
                        <div class="address">
                            <div class="address-icon">
                                <div class="wrap">
                                    <a href="#" data-toggle="modal" data-target="#address"><img
                                            src="../images/pc_icon_add.png" alt=""></a>
                                    <span>添加新地址</span>
                                </div>
                            </div>
                            <div class="address-des">
                                <div class="wrap">
                                    <h6>ss***k</h6>
                                    <p>1573*****666</p>
                                    <p>河北省 唐山市 路北区</p>
                                    <p>唐山市大学公寓村 （063000）</p>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="address" data-backdrop="static" data-keyboard="false" tabindex="-1"
                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <input type="text" placeholder="姓名">
                                    <input type="text" placeholder="手机号">
                                    <div class="address-select">
                                        <select class="form-control">
                                            <option>省份/自治州</option>
                                        </select>
                                        <select class="form-control">
                                            <option>城市/地区</option>
                                        </select>
                                    </div>
                                    <div class="address-select">
                                        <select class="form-control">
                                            <option>区/县</option>
                                        </select>
                                        <select class="form-control">
                                            <option>配送区域</option>
                                        </select>
                                    </div>
                                    <input type="text">
                                    <input type="text" placeholder="邮政编码">
                                    <hr class="address-modalhr">
                                    <div class="btns">
                                        <button class="addressbtn address-modalsave" data-dismiss="modal">保存</button>
                                        <button class="addressbtn address-modalcancel" data-dismiss="modal">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人信息 -->
                    <div class="tab-pane fade" id="v-pills-personalinfo" role="tabpanel"
                        aria-labelledby="v-pills-personalinfo-tab">
                        <p>个人信息</p>
                        <div class="info">
                            <div class="info-icon">
                                <i><img src="../images/pc_icon_user.jpg" alt=""></i>
                            </div>
                            <div class="info-des">
                                <div>
                                    <p class="info-title">基础资料</p>
                                    <span class="reviseinfo">修改信息</span>
                                </div>
                                <div>姓名：六六六</div>
                                <div>生日：1995-06-06</div>
                                <div>性别：女</div>
                                <div class="info-title">高级设置</div>
                                <div>
                                    <p class="info-title">账号地区：中国</p>
                                    <span class="reviseinfo">修改</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 修改密码 -->
                    <div class="tab-pane fade" id="v-pills-revisepwd" role="tabpanel"
                        aria-labelledby="v-pills-revisepwd-tab">
                        <p>修改密码</p>
                        <div class="revisepwd">
                            <table>
                                <tr>
                                    <td><label for="" class="label">选择验证身份方式：</label></td>
                                    <td>
                                        <input type="checkbox"><span>密码验证</span>
                                        <input type="checkbox"><span>邮箱验证</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="pwd" class="label">原密码：</label>
                                    </td>
                                    <td>
                                        <input type="password" id="pwd" placeholder="输入原密码">
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="notes">输入原密码</td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="newpwd" class="label">新密码：</label>
                                    </td>
                                    <td>
                                        <input type="password" id="newpwd" placeholder="新密码">
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="notes">6-16个字符，需要使用字母，数字或符号组合，不能使用纯数字，纯字母，纯符号</td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="renewpwd" class="label">重复新密码：</label>
                                    </td>
                                    <td>
                                        <input type="password" id="renewpwd" placeholder="新密码">
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="notes">再次输入密码</td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="" class="label">验证码：</label>
                                    </td>
                                    <td>
                                        <input type="text">
                                        <i><img src="../images/login_code.png" alt=""></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td class="notes">按右图输入验证码，不区分大小写</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><button class="submit">提交</button></td>
                                </tr>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
    <!-- 底部footer布局 -->
    <footer>
        <section>
            <ul>
                <li>
                    <i>7</i>
                    <a href="#">七天无理由退货</a>
                </li>
                <li>
                    <i>15</i>
                    <a href="#">15天免费换货</a>
                </li>
                <li>
                    <i>邮</i>
                    <a href="#">满599包邮</a>
                </li>
                <li>
                    <i>服</i>
                    <a href="#">手机特色服务</a>
                </li>
            </ul>
        </section>
        <div class="footer">
            <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
            <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
    </footer>

</body>

</html>